<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      width: 600px;
      color: #8f8e8e;
      text-align: center;
      border-collapse: collapse;
    }

    table thead {
      background: #F5F5F5;
    }

    table tr {
      height: 30px;
      line-height: 30px;
      border: 1px solid #ececec;
    }
  </style>
</head>

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <td><input type="checkbox" v-model="data.selected" @change="selectAll" /></td>
          <td>商品</td>
          <td>单价</td>
          <td>库存</td>
          <td colspan="2">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, index) in data.list">
          <td>
            <input type="checkbox" v-model="data.checkboxList" :value="value" @change="checkSelect" />
          </td>
          <td>{{ value.name }}</td>
          <td>{{ value.price }}</td>
          <td>{{ value.stock }}</td>
          <td>
            <button @click="sub(value)">-</button>
            {{ value.number }}
            <button @click="add(value)">+</button>
          </td>
          <td><button @click="del(index,value.id)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总价 {{ totalPrice() }}</td>
        </tr>
      </tfoot>
    </table>
  </div>

  <script type="module">
    import { createApp, reactive } from '../vue.esm-browser.js'
    createApp({
      setup() {
        const data = reactive({
          selected: false,
          checkboxList: [],
          list: [{
            id: 1,
            name: "铅笔",
            price: 10,
            number: 1,
            stock: 3
          },
          {
            id: 2,
            name: "鼠标",
            price: 20,
            number: 2,
            stock: 5
          },
          {
            id: 3,
            name: "键盘",
            price: 30,
            number: 1,
            stock: 6
          }]
        })
        const sub = (value) => {
          value.number--
          if (value.number <= 1) {
            value.number = 1
          }
        }
        const add = (value) => {
          value.number++
          if (value.number >= value.stock) {
            value.number = value.stock
          }
        }

        const del = (index, id) => {
          data.list.splice(index, 1)
          let newArr = data.checkboxList.filter((value, index) => {
            return value.id != id
          })
          data.checkboxList = newArr
          checkSelect()
        }
        const totalPrice = () => {
          let total = 0
          for (let i = 0; i < data.checkboxList.length; i++) {
            total += data.checkboxList[i].price * data.checkboxList[i].number
          }
          return total
        }
        const selectAll = () => {
          if (data.selected) {
            data.checkboxList = data.list
          } else {
            data.checkboxList = []
          }
        }
        const checkSelect = () => {
          if (data.checkboxList.length != data.list.length || data.list.length == 0) {
            data.selected = false
          } else {
            data.selected = true
          }
        }
        return {
          data,
          sub,
          add,
          selectAll,
          del,
          totalPrice,
          checkSelect
        }
      }
    }).mount('#app')
  </script>

</body>

</html>